<template>
    <div class="my">
        <div class="img">
            <img :src="BaseURL+avator" class="avator" @click="avatorUpdate" alt="" />
            <span>{{name}}</span>
        </div>
        <div>
            <div @click="showInfo()"><span>查看个人信息</span>
                <ArrowRightBold></ArrowRightBold>
            </div>
            <div @click="modify()"><span>编辑个人信息</span>
                <ArrowRightBold></ArrowRightBold>
            </div>
            <div @click="canvas()"><span>消息统计</span>
                <ArrowRightBold></ArrowRightBold>
            </div>
            <div @click="quit()"><span>退出</span>
                <ArrowRightBold></ArrowRightBold>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import $http, { IP, BaseURL } from '@/api'
import { useRouter } from 'vue-router'
import { message } from '@/public/index.js'
import { ArrowRightBold } from '@element-plus/icons-vue';
import confirm from '@/public/confirm'
/**
 * @Author dingxing [2023-02-28 15:21:24]
 * @Description 
 */
const $router = useRouter();
const avator = ref('');
const name = ref('');
const userId = localStorage.getItem('id');
onMounted(() => {
    avator.value = localStorage.getItem('avator');
    name.value = localStorage.getItem('name');
});


const avatorUpdate = () => { };
const showInfo = () => { 
    $router.push({path:'/showInfo',query:{userId}})
};
const modify = () => {$router.push({path:'/modify',query:{userId}}) };
const canvas = () => {

    
    $router.replace('/canvas');
};
const quit = () => {
    confirm({title:"退出",message:"确定退出吗？"}).then(() => {
        localStorage.clear();
        message({
            text: "退出成功",
            type: 'success',
        })
        setTimeout(() => {
            $router.replace('/');
        }, 1000);
    }).catch(() => {})

};
</script>

<style lang="less" scoped>
.my {
    font-size: 0.28rem;
    width: calc(100% - 0.6rem);
    padding: 0.3rem;
    .img {
        display: flex;
        img {
            width: 1.2rem;
            height: 1.2rem;
            border-radius: 50%;
            object-fit: cover;
        }
        span {
            font-weight: bold;
            font-size: 0.4rem;
            margin-left: 0.25rem;
            transform: translateY(0.35rem);
        }
        margin-bottom: 0.2rem;
    }

    div {
        width: 100%;
        > div {
            padding: 0.15rem;
            width: calc(100% - 0.2rem);
            display: flex;
            justify-content: space-between;
            svg {
                width: 0.3rem;
                height: 0.3rem;
                margin-right: 0.2rem;
            }
        }
    }
}
</style>